<!DOCTYPE html>
<html lang="en" dir="auto">

<head><meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="index, follow">
<title>Features / Mods | Kyle&#39;s Blog</title>
<meta name="keywords" content="PaperMod, Docs">
<meta name="description" content="Learn About All Features in PaperMod">
<meta name="author" content="Aditya Telange">
<link rel="canonical" href="https://pagesorg.atomgit.net/atomgit-blog/posts/papermod/papermod-features/">
<link crossorigin="anonymous" href="/atomgit-blog/assets/css/stylesheet.5ff2630c4d1b3e25bc21f0ecd96681dbcf58219e741fa627857820b5485cb770.css" integrity="sha256-X/JjDE0bPiW8IfDs2WaB289YIZ50H6YnhXggtUhct3A=" rel="preload stylesheet" as="style">
<link rel="icon" href="https://pagesorg.atomgit.net/atomgit-blog/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="https://pagesorg.atomgit.net/atomgit-blog/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://pagesorg.atomgit.net/atomgit-blog/favicon-32x32.png">
<link rel="apple-touch-icon" href="https://pagesorg.atomgit.net/atomgit-blog/apple-touch-icon.png">
<link rel="mask-icon" href="https://pagesorg.atomgit.net/atomgit-blog/safari-pinned-tab.svg">
<meta name="theme-color" content="#2e2e33">
<meta name="msapplication-TileColor" content="#2e2e33">
<link rel="alternate" hreflang="en" href="https://pagesorg.atomgit.net/atomgit-blog/posts/papermod/papermod-features/">
<noscript>
    <style>
        #theme-toggle,
        .top-link {
            display: none;
        }

    </style>
    <style>
        @media (prefers-color-scheme: dark) {
            :root {
                --theme: rgb(29, 30, 32);
                --entry: rgb(46, 46, 51);
                --primary: rgb(218, 218, 219);
                --secondary: rgb(155, 156, 157);
                --tertiary: rgb(65, 66, 68);
                --content: rgb(196, 196, 197);
                --code-block-bg: rgb(46, 46, 51);
                --code-bg: rgb(55, 56, 62);
                --border: rgb(51, 51, 51);
            }

            .list {
                background: var(--theme);
            }

            .list:not(.dark)::-webkit-scrollbar-track {
                background: 0 0;
            }

            .list:not(.dark)::-webkit-scrollbar-thumb {
                border-color: var(--theme);
            }
        }

    </style>
</noscript>
  

<meta property="og:title" content="Features / Mods" />
<meta property="og:description" content="Learn About All Features in PaperMod" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://pagesorg.atomgit.net/atomgit-blog/posts/papermod/papermod-features/" />
<meta property="og:image" content="https://pagesorg.atomgit.net/atomgit-blog/images/papermod-cover.png" />
<meta property="article:section" content="posts" />
<meta property="article:published_time" content="2021-01-20T00:00:00+00:00" />
<meta property="article:modified_time" content="2021-01-20T00:00:00+00:00" />


<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://pagesorg.atomgit.net/atomgit-blog/images/papermod-cover.png" />
<meta name="twitter:title" content="Features / Mods"/>
<meta name="twitter:description" content="Learn About All Features in PaperMod"/>


<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position":  1 ,
      "name": "Posts",
      "item": "https://pagesorg.atomgit.net/atomgit-blog/posts/"
    }, 
    {
      "@type": "ListItem",
      "position":  2 ,
      "name": "PaperMod",
      "item": "https://pagesorg.atomgit.net/atomgit-blog/posts/papermod/"
    }, 
    {
      "@type": "ListItem",
      "position":  3 ,
      "name": "Features / Mods",
      "item": "https://pagesorg.atomgit.net/atomgit-blog/posts/papermod/papermod-features/"
    }
  ]
}
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Features / Mods",
  "name": "Features \/ Mods",
  "description": "Learn About All Features in PaperMod",
  "keywords": [
    "PaperMod", "Docs"
  ],
  "articleBody": "Intro We’ll be using yml/yaml format for all examples down below, I recommend using yml over toml as it is easier to read.\nYou can find any YML to TOML converters if necessary.\nAssets (js/css) The following is enabled by default\nminification - makes the assets size smallest as possible. bundling - bundles all the styles in one single asset fingerprint/intergity check. Default Theme light/dark/auto 1 2 3 4 params: # defaultTheme: light # defaultTheme: dark defaultTheme: auto # to switch between dark or light according to browser theme Theme Switch Toggle (enabled by default) Shows icon besides title of page to change theme\nTo disable it :\n1 disableThemeToggle: true You can refer following table for better understanding…\ndefaultTheme disableThemeToggle checks local storage? checks system theme? Info auto true No Yes only system theme false Yes (if not-\u003e2) Yes (2) switch present dark true No No force dark only false Yes No switch present light true No No force light only false Yes No switch present Archives Layout Create a page with archive.md in content directory with following content\n. ├── config.yml ├── content/ │ ├── archives.md \u003c--- Create archive.md here │ └── posts/ ├── static/ └── themes/ └── PaperMod/ and add the following to it\n--- title: \"Archive\" layout: \"archives\" url: \"/archives/\" summary: archives --- Note: Archives Layout does not support Multilingual Month Translations.\nex: archives.md\nRegular Mode (default-mode) Home-Info Mode Use 1st entry as some Information\nadd following to config file\nparams: homeInfoParams: Title: Hi there wave Content: Can be Info, links, about... socialIcons: # optional - name: \"\" url: \"\" - name: \"\" url: \"\" Profile Mode Shows Index/Home page as Full Page with Social Links and Image\nadd following to config file\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 params: profileMode: enabled: true title: \"\"\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"c\"\u003e# optional default will be site title\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003esubtitle\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"This is subtitle\"\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eimageUrl\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003cimage link\u003e\"\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"c\"\u003e# optional\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eimageTitle\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003ctitle of image as alt\u003e\"\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"c\"\u003e# optional\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eimageWidth\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"m\"\u003e120\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"c\"\u003e# custom size\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eimageHeight\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"m\"\u003e120\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"c\"\u003e# custom size\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003ebuttons\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e- \u003cspan class=\"nt\"\u003ename\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"l\"\u003eArchive\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eurl\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"/archive\"\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e- \u003cspan class=\"nt\"\u003ename\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"l\"\u003eGithub\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eurl\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"https://github.com/\"\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003esocialIcons\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"c\"\u003e# optional\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e- \u003cspan class=\"nt\"\u003ename\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003cplatform\u003e\"\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eurl\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003clink\u003e\"\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e- \u003cspan class=\"nt\"\u003ename\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003cplatform 2\u003e\"\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eurl\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003clink2\u003e\"\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e \u003c/div\u003e \u003c/div\u003e\u003chr\u003e \u003ch3 id=\"search-page\"\u003eSearch Page\u003c/h3\u003e \u003cp\u003ePaperMod uses \u003ca href=\"https://fusejs.io/getting-started/different-builds.html#explanation-of-different-builds\"\u003eFuse.js Basic\u003c/a\u003e for search functionality\n\u003cp\u003eAdd the following to site config, \u003ccode\u003econfig.yml\u003c/code\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cdiv class=\"chroma\"\u003e \u003ctable class=\"lntable\"\u003e\u003ctr\u003e\u003ctd class=\"lntd\"\u003e \u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode\u003e\u003cspan class=\"lnt\"\u003e1 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e2 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e3 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e4 \u003c/span\u003e\u003cspan class=\"hl\"\u003e\u003cspan class=\"lnt\"\u003e5 \u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e \u003ctd class=\"lntd\"\u003e \u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-yml\" data-lang=\"yml\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nt\"\u003eoutputs\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003ehome\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e- \u003cspan class=\"l\"\u003eHTML\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e- \u003cspan class=\"l\"\u003eRSS\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line hl\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e- \u003cspan class=\"l\"\u003eJSON\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"c\"\u003e# necessary for search\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e \u003c/div\u003e \u003c/div\u003e\u003cp\u003eCreate a page with \u003ccode\u003esearch.md\u003c/code\u003e in \u003ccode\u003econtent\u003c/code\u003e directory with following content\n\u003cdiv class=\"highlight\"\u003e\u003cdiv class=\"chroma\"\u003e \u003ctable class=\"lntable\"\u003e\u003ctr\u003e\u003ctd class=\"lntd\"\u003e \u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode\u003e\u003cspan class=\"lnt\"\u003e1 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e2 \u003c/span\u003e\u003cspan class=\"hl\"\u003e\u003cspan class=\"lnt\"\u003e3 \u003c/span\u003e\u003c/span\u003e\u003cspan class=\"lnt\"\u003e4 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e5 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e6 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e7 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e8 \u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e \u003ctd class=\"lntd\"\u003e \u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-yml\" data-lang=\"yml\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nn\"\u003e---\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e\u003c/span\u003e\u003cspan class=\"nt\"\u003etitle\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"Search\"\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"c\"\u003e# in any language you want\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line hl\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e\u003c/span\u003e\u003cspan class=\"nt\"\u003elayout\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"search\"\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"c\"\u003e# necessary for search\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e\u003c/span\u003e\u003cspan class=\"c\"\u003e# url: \"/archive\"\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e\u003c/span\u003e\u003cspan class=\"c\"\u003e# description: \"Description for Search\"\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e\u003c/span\u003e\u003cspan class=\"nt\"\u003esummary\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"search\"\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e\u003c/span\u003e\u003cspan class=\"nt\"\u003eplaceholder\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"placeholder text in search input box\"\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e\u003c/span\u003e\u003cspan class=\"nn\"\u003e---\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e \u003c/div\u003e \u003c/div\u003e\u003cp\u003eTo hide a particular page from being searched, add it in post’s frontmatter\n\u003cdiv class=\"highlight\"\u003e\u003cdiv class=\"chroma\"\u003e \u003ctable class=\"lntable\"\u003e\u003ctr\u003e\u003ctd class=\"lntd\"\u003e \u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode\u003e\u003cspan class=\"lnt\"\u003e1 \u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e \u003ctd class=\"lntd\"\u003e \u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-yml\" data-lang=\"yml\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nt\"\u003esearchHidden\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"kc\"\u003etrue\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e \u003c/div\u003e \u003c/div\u003e\u003cp\u003eex: \u003ca href=\"https://raw.githubusercontent.com/adityatelange/hugo-PaperMod/exampleSite/content/search.md\"\u003esearch.md\u003c/a\u003e\n\u003cblockquote\u003e \u003cp\u003eSearch Page also has Key bindings:\n\u003cul\u003e \u003cli\u003eArrow keys to move up/down the list\u003c/li\u003e \u003cli\u003eEnter key (return) or Right Arrow key to go to the highlighted page\u003c/li\u003e \u003cli\u003eEscape key to clear searchbox and results\u003c/li\u003e \u003c/ul\u003e \u003c/blockquote\u003e \u003cp\u003eFor Multilingual use \u003ccode\u003esearch.\u003clang\u003e.md\u003c/code\u003e ex. \u003ccode\u003esearch.es.md\u003c/code\u003e.\n\u003cp\u003e\u003cstrong\u003eNote:\u003c/strong\u003e Search will work only on current language, user is currently on !\n\u003cp\u003e\u003cstrong\u003eCustomizing Fusejs Options\u003c/strong\u003e\n\u003cp\u003eRefer \u003ca href=\"https://fusejs.io/api/options.html\"\u003ehttps://fusejs.io/api/options.html\u003c/a\u003e for Options, Add those as shown below.\n\u003cdiv class=\"highlight\"\u003e\u003cdiv class=\"chroma\"\u003e \u003ctable class=\"lntable\"\u003e\u003ctr\u003e\u003ctd class=\"lntd\"\u003e \u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode\u003e\u003cspan class=\"lnt\"\u003e 1 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e 2 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e 3 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e 4 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e 5 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e 6 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e 7 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e 8 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e 9 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e10 \u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e \u003ctd class=\"lntd\"\u003e \u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-yml\" data-lang=\"yml\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nt\"\u003eparams\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003efuseOpts\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eisCaseSensitive\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"kc\"\u003efalse\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eshouldSort\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"kc\"\u003etrue\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003elocation\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"m\"\u003e0\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003edistance\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"m\"\u003e1000\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003ethreshold\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"m\"\u003e0.4\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eminMatchCharLength\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"m\"\u003e0\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"c\"\u003e# limit: 10 # refer: https://www.fusejs.io/api/methods.html#search\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003ekeys\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"title\"\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"permalink\"\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"summary\"\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"content\"\u003c/span\u003e\u003cspan class=\"p\"\u003e]\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e \u003c/div\u003e \u003c/div\u003e\u003chr\u003e \u003ch3 id=\"draft-page-indication\"\u003eDraft Page indication\u003c/h3\u003e \u003cp\u003eadds \u003ccode\u003e[draft]\u003c/code\u003e mark to indicate draft pages.\n\u003chr\u003e \u003ch3 id=\"post-cover-image\"\u003ePost Cover Image\u003c/h3\u003e \u003cp\u003eIn post’s page-variables add :\n\u003cdiv class=\"highlight\"\u003e\u003cdiv class=\"chroma\"\u003e \u003ctable class=\"lntable\"\u003e\u003ctr\u003e\u003ctd class=\"lntd\"\u003e \u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode\u003e\u003cspan class=\"lnt\"\u003e1 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e2 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e3 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e4 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e5 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e6 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e7 \u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e \u003ctd class=\"lntd\"\u003e \u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-yml\" data-lang=\"yml\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nt\"\u003ecover\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eimage\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003cimage path/url\u003e\"\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"c\"\u003e# can also paste direct link from external site\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"c\"\u003e# ex. https://i.ibb.co/K0HVPBd/paper-mod-profilemode.png\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003ealt\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003calt text\u003e\"\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003ecaption\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"\u003ctext\u003e\"\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003erelative\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"kc\"\u003efalse\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"c\"\u003e# To use relative path for cover image, used in hugo Page-bundles\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e \u003c/div\u003e \u003c/div\u003e\u003cp\u003eWhen you include images in the \u003ca href=\"https://gohugo.io/content-management/page-bundles/\"\u003ePage Bundle\u003c/a\u003e, multiple sizes of the image will automatically be provided using the HTML5 \u003ccode\u003esrcset\u003c/code\u003e field.\n\u003cp\u003eTo reduce generation time and size of the site, you can disable this feature using\n\u003cdiv class=\"highlight\"\u003e\u003cdiv class=\"chroma\"\u003e \u003ctable class=\"lntable\"\u003e\u003ctr\u003e\u003ctd class=\"lntd\"\u003e \u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode\u003e\u003cspan class=\"lnt\"\u003e1 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e2 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e3 \u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e \u003ctd class=\"lntd\"\u003e \u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-yml\" data-lang=\"yml\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nt\"\u003eparams\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003ecover\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eresponsiveImages\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"kc\"\u003efalse\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e \u003c/div\u003e \u003c/div\u003e\u003cp\u003eTo enable hyperlinks to the full image size on post pages, use\n\u003cdiv class=\"highlight\"\u003e\u003cdiv class=\"chroma\"\u003e \u003ctable class=\"lntable\"\u003e\u003ctr\u003e\u003ctd class=\"lntd\"\u003e \u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode\u003e\u003cspan class=\"lnt\"\u003e1 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e2 \u003c/span\u003e\u003cspan class=\"lnt\"\u003e3 \u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e \u003ctd class=\"lntd\"\u003e \u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-yml\" data-lang=\"yml\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nt\"\u003eparams\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003ecover\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003elinkFullImages\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"kc\"\u003etrue\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e \u003c/div\u003e \u003c/div\u003e\u003chr\u003e \u003ch3 id=\"share-buttons-on-post\"\u003eShare Buttons on post\u003c/h3\u003e \u003cp\u003eDisplays Share Buttons at Bottom of each post\n\u003cp\u003eto show share buttons add\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-yml\" data-lang=\"yml\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nt\"\u003eparams\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eShowShareButtons\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"kc\"\u003etrue\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003chr\u003e \u003ch3 id=\"show-post-reading-time\"\u003eShow post reading time\u003c/h3\u003e \u003cp\u003eDisplays Reading Time (the estimated time, in minutes, it takes to read the content.)\n\u003cp\u003eTo show reading time add\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-yml\" data-lang=\"yml\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nt\"\u003eParams\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eShowReadingTime\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"kc\"\u003etrue\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003chr\u003e \u003ch3 id=\"show-table-of-contents-toc-on-blog-post\"\u003eShow Table of Contents (Toc) on blog post\u003c/h3\u003e \u003cp\u003eDisplays ToC on blog-pages\n\u003cp\u003eTo show ToC add following to page-variables\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-yml\" data-lang=\"yml\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nt\"\u003eShowToc\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"kc\"\u003etrue\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003eTo keep Toc Open \u003cstrong\u003eby default\u003c/strong\u003e on a post add following to page-variables:\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-yml\" data-lang=\"yml\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nt\"\u003eTocOpen\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"kc\"\u003etrue\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003chr\u003e \u003ch3 id=\"breadcrumb-navigation\"\u003eBreadCrumb Navigation\u003c/h3\u003e \u003cp\u003eAdds BreadCrumb Navigation above Post’s Title to show subsections and Navigation to Home\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-yml\" data-lang=\"yml\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nt\"\u003eparams\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eShowBreadCrumbs\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"kc\"\u003etrue\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003eCan be diabled for particular page’s front-matter\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-yml\" data-lang=\"yml\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nn\"\u003e---\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e\u003c/span\u003e\u003cspan class=\"nt\"\u003eShowBreadCrumbs\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"kc\"\u003efalse\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e\u003c/span\u003e\u003cspan class=\"nn\"\u003e---\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003chr\u003e \u003ch3 id=\"edit-link-for-posts\"\u003eEdit Link for Posts\u003c/h3\u003e \u003cp\u003eAdd a button to suggest changes by using the file path of the post to link to a edit destination.\n\u003cp\u003eFor site config use:\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-yml\" data-lang=\"yml\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nt\"\u003eParams\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eeditPost\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eURL\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"https://github.com/\u003cpath_to_repo\u003e/content\"\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eText\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"Suggest Changes\"\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"c\"\u003e# edit text\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eappendFilePath\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"kc\"\u003etrue\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"c\"\u003e# to append file path to Edit link\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003eCan be modified for individual pages\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-yml\" data-lang=\"yml\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nn\"\u003e---\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e\u003c/span\u003e\u003cspan class=\"nt\"\u003eeditPost\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eURL\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"https://github.com/\u003cpath_to_repo\u003e/content\"\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eText\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"Suggest Changes\"\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"c\"\u003e# edit text\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eappendFilePath\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"kc\"\u003etrue\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"c\"\u003e# to append file path to Edit link\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e\u003c/span\u003e\u003cspan class=\"nn\"\u003e---\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003eThe example above would yield the following link for the post file \u003ccode\u003eposts/post-name.md\u003c/code\u003e: \u003ccode\u003ehttps://github.com/\u003cpath_to_repo\u003e/content/posts/post-name.md\u003c/code\u003e\n\u003ctable\u003e \u003cthead\u003e \u003ctr\u003e \u003cth\u003eParameter\u003c/th\u003e \u003cth\u003eRequired\u003c/th\u003e \u003cth\u003eDefault Value\u003c/th\u003e \u003c/tr\u003e \u003c/thead\u003e \u003ctbody\u003e \u003ctr\u003e \u003ctd\u003e\u003ccode\u003eeditPost.URL\u003c/code\u003e\u003c/td\u003e \u003ctd\u003etrue\u003c/td\u003e \u003ctd\u003e-\u003c/td\u003e \u003c/tr\u003e \u003ctr\u003e \u003ctd\u003e\u003ccode\u003eeditPost.appendFilePath\u003c/code\u003e\u003c/td\u003e \u003ctd\u003efalse\u003c/td\u003e \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e \u003c/tr\u003e \u003ctr\u003e \u003ctd\u003e\u003ccode\u003eeditPost.Text\u003c/code\u003e\u003c/td\u003e \u003ctd\u003efalse\u003c/td\u003e \u003ctd\u003e\u003ccode\u003eEdit\u003c/code\u003e\u003c/td\u003e \u003c/tr\u003e \u003c/tbody\u003e \u003c/table\u003e \u003cp\u003eSince the link generated is a regular HTML anchor tag \u003ccode\u003e\u003ca href=...\u003e\u003c/code\u003e, you can also use other URL schemas like \u003ccode\u003emailto://\u003c/code\u003e, e.g. \u003ccode\u003eURL: \"mailto://mail@example.com?subject=Suggesting changes for \"\u003c/code\u003e\n\u003chr\u003e \u003ch3 id=\"other-posts-suggestion-below-a-post\"\u003eOther Posts suggestion below a post\u003c/h3\u003e \u003cp\u003eAdds a Previous / Next post suggestion under a single post\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-yml\" data-lang=\"yml\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nt\"\u003eparams\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eShowPostNavLinks\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"kc\"\u003etrue\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003chr\u003e \u003ch3 id=\"code-copy-button\"\u003eCode Copy Button\u003c/h3\u003e \u003cp\u003eAdds a \u003ccode\u003ecopy\u003c/code\u003e button in code block to copy the code it contains\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-yml\" data-lang=\"yml\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nt\"\u003eparams\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eShowCodeCopyButtons\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"kc\"\u003etrue\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003chr\u003e \u003ch3 id=\"multiple-authors\"\u003eMultiple Authors\u003c/h3\u003e \u003cp\u003eTo Use multiple authors for a post, in post-variables:\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-yml\" data-lang=\"yml\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nn\"\u003e---\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e\u003c/span\u003e\u003cspan class=\"nt\"\u003eauthor\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"Me\"\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"You\"\u003c/span\u003e\u003cspan class=\"p\"\u003e]\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e\u003c/span\u003e\u003cspan class=\"nn\"\u003e---\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003eTo use Multiple Authors Site-wide, in \u003ccode\u003econfig.yml\u003c/code\u003e:\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-yml\" data-lang=\"yml\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nt\"\u003eparams\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003eauthor\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"s2\"\u003e\"Me\"\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s2\"\u003e\"You\"\u003c/span\u003e\u003cspan class=\"p\"\u003e]\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003chr\u003e \u003ch3 id=\"comments\"\u003eComments\u003c/h3\u003e \u003cp\u003eto add comments, create a html file\n\u003cp\u003e\u003ccode\u003elayouts/partials/comments.html\u003c/code\u003e\n\u003cp\u003eand paste code provided by your comments provider\n\u003cp\u003ealso in config add this\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-yml\" data-lang=\"yml\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nt\"\u003eparams\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nt\"\u003ecomments\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"kc\"\u003etrue\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003eread more about this \u003ca href=\"https://gohugo.io/content-management/comments/\"\u003ehugo-comments\u003c/a\u003e\n\u003chr\u003e \u003ch3 id=\"accesskeys\"\u003eAccessKeys\u003c/h3\u003e \u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003ec - ToC Open/Close \u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003eg - Go To Top \u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003eh - Home (according to current lang) \u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003et - Theme toggle \u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e/ - Jumps to search page if in menu \u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e\u003ca href=\"https://www.w3schools.com/tags/att_global_accesskey.asp\"\u003eWhat’s AccessKeys ?\u003c/a\u003e\n\u003chr\u003e \u003ch3 id=\"enhanced-seo\"\u003eEnhanced SEO\u003c/h3\u003e \u003cp\u003e\u003cstrong\u003eEnabled only when \u003ccode\u003eenv: production\u003c/code\u003e\u003c/strong\u003e\n\u003cul\u003e \u003cli\u003e\u003ca href=\"https://support.google.com/webmasters/answer/7506797?hl=en\"\u003eRich Results/Snippets Support\u003c/a\u003e\u003c/li\u003e \u003c/ul\u003e \u003ch4 id=\"twitter-cards-support\"\u003eTwitter Cards Support\u003c/h4\u003e \u003cul\u003e \u003cli\u003eThe Twitter Cards metadata, except \u003ccode\u003etwitter:image\u003c/code\u003e should not require additional configuration, since it is generated from metadata that you should already have (for instance the page title and description).\u003c/li\u003e \u003cli\u003eThe \u003ccode\u003etwitter:image\u003c/code\u003e uses the \u003ca href=\"/atomgit-blog/posts/papermod/papermod-features/#post-cover-image\"\u003ePost Cover Image\u003c/a\u003e, if present.\u003c/li\u003e \u003cli\u003eIn the absence of a cover images, the first image from the \u003ccode\u003eimages\u003c/code\u003e frontmatter (a list) is used. \u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-yaml\" data-lang=\"yaml\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nt\"\u003eimages\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e- \u003cspan class=\"l\"\u003eimage_01.png\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e- \u003cspan class=\"l\"\u003eimage_02.png\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003c/li\u003e \u003cli\u003eFinally, if neither of those are provided, \u003ccode\u003etwitter:image\u003c/code\u003e comes from the first \u003ca href=\"https://gohugo.io/content-management/page-bundles/\"\u003ePage Bundle\u003c/a\u003e image with \u003ccode\u003efeature\u003c/code\u003e in the name, with a fallback to the first image with \u003ccode\u003ecover\u003c/code\u003e or \u003ccode\u003ethumbnail\u003c/code\u003e in the name.\u003c/li\u003e \u003c/ul\u003e \u003ch4 id=\"opengraph-support\"\u003eOpenGraph support\u003c/h4\u003e \u003cul\u003e \u003cli\u003eThe OpenGraph metadata, except \u003ccode\u003eog:image\u003c/code\u003e should not require additional configuration, since it is generated from metadata that you should already have (for instance the page title and description).\u003c/li\u003e \u003cli\u003eThe \u003ccode\u003eog:image\u003c/code\u003e uses the \u003ca href=\"/atomgit-blog/posts/papermod/papermod-features/#post-cover-image\"\u003ePost Cover Image\u003c/a\u003e, if present.\u003c/li\u003e \u003cli\u003eIn the absence of a cover images, the first image from the \u003ccode\u003eimages\u003c/code\u003e frontmatter (a list) is used. \u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-yaml\" data-lang=\"yaml\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nt\"\u003eimages\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e- \u003cspan class=\"l\"\u003eimage_01.png\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e- \u003cspan class=\"l\"\u003eimage_02.png\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003c/li\u003e \u003cli\u003eFinally, if neither of those are provided, \u003ccode\u003eog:image\u003c/code\u003e comes from the first \u003ca href=\"https://gohugo.io/content-management/page-bundles/\"\u003ePage Bundle\u003c/a\u003e image with \u003ccode\u003efeature\u003c/code\u003e in the name, with a fallback to the first image with \u003ccode\u003ecover\u003c/code\u003e or \u003ccode\u003ethumbnail\u003c/code\u003e in the name.\u003c/li\u003e \u003cli\u003eFor pages, you can also add audio (using frontmatter \u003ccode\u003eaudio: filename.ext\u003c/code\u003e) and/or videos. \u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-yaml\" data-lang=\"yaml\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nt\"\u003evideos\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e- \u003cspan class=\"l\"\u003efilename01.mov\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e- \u003cspan class=\"l\"\u003efilename02.avi\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003c/li\u003e \u003c/ul\u003e \u003chr\u003e \u003ch3 id=\"multilingual-support\"\u003eMultilingual Support\u003c/h3\u003e \u003chr\u003e \u003ch3 id=\"misc\"\u003eMisc\u003c/h3\u003e \u003ch4 id=\"scroll-bar-themed-by-default\"\u003eScroll-Bar themed (by default)\u003c/h4\u003e \u003ch4 id=\"smooth-scroll-between-in-page-links-by-default\"\u003eSmooth Scroll between in-page links (by default)\u003c/h4\u003e \u003ch4 id=\"scroll-to-top-button-by-default\"\u003eScroll-to-Top Button (by default)\u003c/h4\u003e \u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003eDisplays a Scroll-to-Top button in right-bottom corner \u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch4 id=\"google-analytics-integration\"\u003eGoogle Analytics integration\u003c/h4\u003e \u003ch4 id=\"syntax-highlighting\"\u003eSyntax highlighting\u003c/h4\u003e \u003ch4 id=\"rss-feeds\"\u003eRSS feeds\u003c/h4\u003e ",
  "wordCount" : "1321",
  "inLanguage": "en",
  "image": "https://pagesorg.atomgit.net/atomgit-blog/images/papermod-cover.png","datePublished": "2021-01-20T00:00:00Z",
  "dateModified": "2021-01-20T00:00:00Z",
  "author":[{
    "@type": "Person",
    "name": "Aditya Telange"
  }],
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://pagesorg.atomgit.net/atomgit-blog/posts/papermod/papermod-features/"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Kyle's Blog",
    "logo": {
      "@type": "ImageObject",
      "url": "https://pagesorg.atomgit.net/atomgit-blog/favicon.ico"
    }
  }
}
</script>
</head>

<body class="" id="top">
<script>
    if (localStorage.getItem("pref-theme") === "dark") {
        document.body.classList.add('dark');
    } else if (localStorage.getItem("pref-theme") === "light") {
        document.body.classList.remove('dark')
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.body.classList.add('dark');
    }

</script>

<header class="header">
    <nav class="nav">
        <div class="logo">
            <a href="https://pagesorg.atomgit.net/atomgit-blog/" accesskey="h" title="Kyle&#39;s Blog (Alt + H)">Kyle&#39;s Blog</a>
            <div class="logo-switches">
                <button id="theme-toggle" accesskey="t" title="(Alt + T)">
                    <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                    </svg>
                    <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <circle cx="12" cy="12" r="5"></circle>
                        <line x1="12" y1="1" x2="12" y2="3"></line>
                        <line x1="12" y1="21" x2="12" y2="23"></line>
                        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                        <line x1="1" y1="12" x2="3" y2="12"></line>
                        <line x1="21" y1="12" x2="23" y2="12"></line>
                        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                    </svg>
                </button>
                <ul class="lang-switch"><li>|</li>
                    <li>
                        <a href="https://pagesorg.atomgit.net/atomgit-blog/fr/" title="French"
                            aria-label=":fr:">🇫🇷</a>
                    </li>
                    <li>
                        <a href="https://pagesorg.atomgit.net/atomgit-blog/fa/" title="Fa"
                            aria-label="Fa">Fa</a>
                    </li>
                </ul>
            </div>
        </div>
        <ul id="menu">
            <li>
                <a href="https://pagesorg.atomgit.net/atomgit-blog/archives" title="Archive">
                    <span>Archive</span>
                </a>
            </li>
            <li>
                <a href="https://pagesorg.atomgit.net/atomgit-blog/search/" title="Search (Alt &#43; /)" accesskey=/>
                    <span>Search</span>
                </a>
            </li>
            <li>
                <a href="https://pagesorg.atomgit.net/atomgit-blog/tags/" title="Tags">
                    <span>Tags</span>
                </a>
            </li>
            <li>
                <a href="https://github.com/adityatelange/hugo-PaperMod/wiki/" title="WiKi">
                    <span>WiKi</span>&nbsp;
                    <svg fill="none" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round"
                        stroke-linejoin="round" stroke-width="2.5" viewBox="0 0 24 24" height="12" width="12">
                        <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
                        <path d="M15 3h6v6"></path>
                        <path d="M10 14L21 3"></path>
                    </svg>
                </a>
            </li>
        </ul>
    </nav>
</header>
<main class="main">

<article class="post-single">
  <header class="post-header">
    <div class="breadcrumbs"><a href="https://pagesorg.atomgit.net/atomgit-blog/">Home</a>&nbsp;»&nbsp;<a href="https://pagesorg.atomgit.net/atomgit-blog/posts/">Posts</a>&nbsp;»&nbsp;<a href="https://pagesorg.atomgit.net/atomgit-blog/posts/papermod/">PaperMod</a></div>
    <h1 class="post-title entry-hint-parent">
      Features / Mods
    </h1>
    <div class="post-meta"><span title='2021-01-20 00:00:00 +0000 UTC'>January 20, 2021</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Aditya Telange&nbsp;|&nbsp;<a href="https://github.com/adityatelange/hugo-PaperMod/tree/exampleSite/content/posts/papermod/papermod-features/index.md" rel="noopener noreferrer" target="_blank">Suggest Changes</a>

</div>
  </header> <div class="toc">
    <details >
        <summary accesskey="c" title="(Alt + C)">
            <span class="details">Table of Contents</span>
        </summary>

        <div class="inner"><ul>
                <li>
                    <a href="#intro" aria-label="Intro">Intro</a></li>
                <li>
                    <a href="#assets-jscss" aria-label="Assets (js/css)">Assets (js/css)</a></li>
                <li>
                    <a href="#default-theme-lightdarkauto" aria-label="Default Theme light/dark/auto">Default Theme light/dark/auto</a></li>
                <li>
                    <a href="#theme-switch-toggle-enabled-by-default" aria-label="Theme Switch Toggle (enabled by default)">Theme Switch Toggle (enabled by default)</a></li>
                <li>
                    <a href="#archives-layout" aria-label="Archives Layout">Archives Layout</a></li>
                <li>
                    <a href="#regular-mode-default-mode" aria-label="Regular Mode (default-mode)">Regular Mode (default-mode)</a></li>
                <li>
                    <a href="#home-info-mode" aria-label="Home-Info Mode">Home-Info Mode</a></li>
                <li>
                    <a href="#profile-mode" aria-label="Profile Mode">Profile Mode</a></li>
                <li>
                    <a href="#search-page" aria-label="Search Page">Search Page</a></li>
                <li>
                    <a href="#draft-page-indication" aria-label="Draft Page indication">Draft Page indication</a></li>
                <li>
                    <a href="#post-cover-image" aria-label="Post Cover Image">Post Cover Image</a></li>
                <li>
                    <a href="#share-buttons-on-post" aria-label="Share Buttons on post">Share Buttons on post</a></li>
                <li>
                    <a href="#show-post-reading-time" aria-label="Show post reading time">Show post reading time</a></li>
                <li>
                    <a href="#show-table-of-contents-toc-on-blog-post" aria-label="Show Table of Contents (Toc) on blog post">Show Table of Contents (Toc) on blog post</a></li>
                <li>
                    <a href="#breadcrumb-navigation" aria-label="BreadCrumb Navigation">BreadCrumb Navigation</a></li>
                <li>
                    <a href="#edit-link-for-posts" aria-label="Edit Link for Posts">Edit Link for Posts</a></li>
                <li>
                    <a href="#other-posts-suggestion-below-a-post" aria-label="Other Posts suggestion below a post">Other Posts suggestion below a post</a></li>
                <li>
                    <a href="#code-copy-button" aria-label="Code Copy Button">Code Copy Button</a></li>
                <li>
                    <a href="#multiple-authors" aria-label="Multiple Authors">Multiple Authors</a></li>
                <li>
                    <a href="#comments" aria-label="Comments">Comments</a></li>
                <li>
                    <a href="#accesskeys" aria-label="AccessKeys">AccessKeys</a></li>
                <li>
                    <a href="#enhanced-seo" aria-label="Enhanced SEO">Enhanced SEO</a><ul>
                        
                <li>
                    <a href="#twitter-cards-support" aria-label="Twitter Cards Support">Twitter Cards Support</a></li>
                <li>
                    <a href="#opengraph-support" aria-label="OpenGraph support">OpenGraph support</a></li></ul>
                </li>
                <li>
                    <a href="#multilingual-support" aria-label="Multilingual Support">Multilingual Support</a></li>
                <li>
                    <a href="#misc" aria-label="Misc">Misc</a><ul>
                        
                <li>
                    <a href="#scroll-bar-themed-by-default" aria-label="Scroll-Bar themed (by default)">Scroll-Bar themed (by default)</a></li>
                <li>
                    <a href="#smooth-scroll-between-in-page-links-by-default" aria-label="Smooth Scroll between in-page links (by default)">Smooth Scroll between in-page links (by default)</a></li>
                <li>
                    <a href="#scroll-to-top-button-by-default" aria-label="Scroll-to-Top Button (by default)">Scroll-to-Top Button (by default)</a></li>
                <li>
                    <a href="#google-analytics-integration" aria-label="Google Analytics integration">Google Analytics integration</a></li>
                <li>
                    <a href="#syntax-highlighting" aria-label="Syntax highlighting">Syntax highlighting</a></li>
                <li>
                    <a href="#rss-feeds" aria-label="RSS feeds">RSS feeds</a>
                </li>
            </ul>
            </li>
            </ul>
        </div>
    </details>
</div>

  <div class="post-content"><h3 id="intro">Intro<a hidden class="anchor" aria-hidden="true" href="#intro">#</a></h3>
<ul>
<li>
<p><strong>We&rsquo;ll be using <code>yml/yaml</code> format for all examples down below, I recommend using <code>yml</code> over <code>toml</code> as it is easier to read.</strong></p>
</li>
<li>
<p>You can find any <a href="https://www.google.com/search?q=yml+to+toml">YML to TOML</a> converters if necessary.</p>
</li>
</ul>
<hr>
<h3 id="assets-jscss">Assets (js/css)<a hidden class="anchor" aria-hidden="true" href="#assets-jscss">#</a></h3>
<p>The following is enabled by default</p>
<ul>
<li><a href="https://gohugo.io/hugo-pipes/minification/">minification</a> - makes the assets size smallest as possible.</li>
<li><a href="https://gohugo.io/hugo-pipes/bundling/">bundling</a> - bundles all the styles in one single asset</li>
<li><a href="https://gohugo.io/hugo-pipes/fingerprint/">fingerprint/intergity</a> check.</li>
</ul>
<hr>
<h3 id="default-theme-lightdarkauto">Default Theme light/dark/auto<a hidden class="anchor" aria-hidden="true" href="#default-theme-lightdarkauto">#</a></h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="c"># defaultTheme: light</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="c"># defaultTheme: dark</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">defaultTheme</span><span class="p">:</span><span class="w"> </span><span class="l">auto</span><span class="w"> </span><span class="c"># to switch between dark or light according to browser theme</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div></details>
<hr>
<h3 id="theme-switch-toggle-enabled-by-default">Theme Switch Toggle (enabled by default)<a hidden class="anchor" aria-hidden="true" href="#theme-switch-toggle-enabled-by-default">#</a></h3>
<p>Shows icon besides title of page to change theme</p>
<p>To disable it :</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">disableThemeToggle</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p>You can refer following table for better understanding&hellip;</p>
<table>
<thead>
<tr>
<th><code>defaultTheme</code></th>
<th><code>disableThemeToggle</code></th>
<th>checks local storage?</th>
<th>checks system theme?</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>auto</code></td>
<td>true</td>
<td>No</td>
<td>Yes</td>
<td>only system theme</td>
</tr>
<tr>
<td></td>
<td>false</td>
<td>Yes (if not-&gt;2)</td>
<td>Yes (2)</td>
<td><em>switch present</em></td>
</tr>
<tr>
<td><code>dark</code></td>
<td>true</td>
<td>No</td>
<td>No</td>
<td>force dark only</td>
</tr>
<tr>
<td></td>
<td>false</td>
<td>Yes</td>
<td>No</td>
<td><em>switch present</em></td>
</tr>
<tr>
<td><code>light</code></td>
<td>true</td>
<td>No</td>
<td>No</td>
<td>force light only</td>
</tr>
<tr>
<td></td>
<td>false</td>
<td>Yes</td>
<td>No</td>
<td><em>switch present</em></td>
</tr>
</tbody>
</table>
<hr>
<h3 id="archives-layout">Archives Layout<a hidden class="anchor" aria-hidden="true" href="#archives-layout">#</a></h3>
<p>Create a page with <code>archive.md</code> in <code>content</code> directory with following content</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">.
</span></span><span class="line"><span class="cl">├── config.yml
</span></span><span class="line"><span class="cl">├── content/
</span></span><span class="line"><span class="cl">│   ├── archives.md   &lt;--- Create archive.md here
</span></span><span class="line"><span class="cl">│   └── posts/
</span></span><span class="line"><span class="cl">├── static/
</span></span><span class="line"><span class="cl">└── themes/
</span></span><span class="line"><span class="cl">    └── PaperMod/
</span></span></code></pre></div><p>and add the following to it</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;Archive&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">layout</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;archives&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">url</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;/archives/&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">summary</span><span class="p">:</span><span class="w"> </span><span class="l">archives</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span><span class="w">
</span></span></span></code></pre></div><p><strong>Note:</strong> Archives Layout does not support Multilingual Month Translations.</p>
<p>ex: <a href="https://raw.githubusercontent.com/adityatelange/hugo-PaperMod/exampleSite/content/archives.md">archives.md</a></p>
<hr>
<h3 id="regular-mode-default-mode">Regular Mode (default-mode)<a hidden class="anchor" aria-hidden="true" href="#regular-mode-default-mode">#</a></h3>
<p><img loading="lazy" src="images/regular.jpg" alt="regular"  />
</p>
<hr>
<h3 id="home-info-mode">Home-Info Mode<a hidden class="anchor" aria-hidden="true" href="#home-info-mode">#</a></h3>
<p><img loading="lazy" src="images/homeinfo.jpg" alt="homeinfo"  />
</p>
<p>Use 1st entry as some Information</p>
<p>add following to config file</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">homeInfoParams</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">Title</span><span class="p">:</span><span class="w"> </span><span class="l">Hi there wave</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">Content</span><span class="p">:</span><span class="w"> </span><span class="l">Can be Info, links, about...</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">socialIcons</span><span class="p">:</span><span class="w"> </span><span class="c"># optional</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&lt;platform&gt;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="nt">url</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&lt;link&gt;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&lt;platform 2&gt;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="nt">url</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&lt;link2&gt;&#34;</span><span class="w">
</span></span></span></code></pre></div><hr>
<h3 id="profile-mode">Profile Mode<a hidden class="anchor" aria-hidden="true" href="#profile-mode">#</a></h3>
<p><img loading="lazy" src="https://raw.githubusercontent.com/adityatelange/hugo-PaperMod/exampleSite/content/posts/papermod/papermod-features/images/profile.jpg" alt="profile"  />
</p>
<p>Shows Index/Home page as Full Page with Social Links and Image</p>
<p>add following to config file</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">profileMode</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">enabled</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&lt;Title&gt;&#34;</span><span class="w"> </span><span class="c"># optional default will be site title</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">subtitle</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;This is subtitle&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">imageUrl</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&lt;image link&gt;&#34;</span><span class="w"> </span><span class="c"># optional</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">imageTitle</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&lt;title of image as alt&gt;&#34;</span><span class="w"> </span><span class="c"># optional</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">imageWidth</span><span class="p">:</span><span class="w"> </span><span class="m">120</span><span class="w"> </span><span class="c"># custom size</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">imageHeight</span><span class="p">:</span><span class="w"> </span><span class="m">120</span><span class="w"> </span><span class="c"># custom size</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">buttons</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">Archive</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span><span class="nt">url</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;/archive&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">Github</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span><span class="nt">url</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;https://github.com/&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">socialIcons</span><span class="p">:</span><span class="w"> </span><span class="c"># optional</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&lt;platform&gt;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="nt">url</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&lt;link&gt;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&lt;platform 2&gt;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="nt">url</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&lt;link2&gt;&#34;</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><hr>
<h3 id="search-page">Search Page<a hidden class="anchor" aria-hidden="true" href="#search-page">#</a></h3>
<p>PaperMod uses <a href="https://fusejs.io/getting-started/different-builds.html#explanation-of-different-builds">Fuse.js Basic</a> for search functionality</p>
<p>Add the following to site config, <code>config.yml</code></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="hl"><span class="lnt">5
</span></span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">outputs</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">home</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span>- <span class="l">HTML</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span>- <span class="l">RSS</span><span class="w">
</span></span></span><span class="line hl"><span class="cl"><span class="w">    </span>- <span class="l">JSON</span><span class="w"> </span><span class="c"># necessary for search</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p>Create a page with <code>search.md</code> in <code>content</code> directory with following content</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="hl"><span class="lnt">3
</span></span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;Search&#34;</span><span class="w"> </span><span class="c"># in any language you want</span><span class="w">
</span></span></span><span class="line hl"><span class="cl"><span class="w"></span><span class="nt">layout</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;search&#34;</span><span class="w"> </span><span class="c"># necessary for search</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="c"># url: &#34;/archive&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="c"># description: &#34;Description for Search&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">summary</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;search&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">placeholder</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;placeholder text in search input box&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p>To hide a particular page from being searched, add it in post&rsquo;s frontmatter</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">searchHidden</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p>ex: <a href="https://raw.githubusercontent.com/adityatelange/hugo-PaperMod/exampleSite/content/search.md">search.md</a></p>
<blockquote>
<p>Search Page also has Key bindings:</p>
<ul>
<li>Arrow keys to move up/down the list</li>
<li>Enter key (return) or Right Arrow key to go to the highlighted page</li>
<li>Escape key to clear searchbox and results</li>
</ul>
</blockquote>
<p>For Multilingual use <code>search.&lt;lang&gt;.md</code> ex. <code>search.es.md</code>.</p>
<p><strong>Note:</strong> Search will work only on current language, user is currently on !</p>
<p><strong>Customizing Fusejs Options</strong></p>
<p>Refer <a href="https://fusejs.io/api/options.html">https://fusejs.io/api/options.html</a> for Options, Add those as shown below.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">fuseOpts</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">isCaseSensitive</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">shouldSort</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">location</span><span class="p">:</span><span class="w"> </span><span class="m">0</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">distance</span><span class="p">:</span><span class="w"> </span><span class="m">1000</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">threshold</span><span class="p">:</span><span class="w"> </span><span class="m">0.4</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">minMatchCharLength</span><span class="p">:</span><span class="w"> </span><span class="m">0</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="c"># limit: 10 # refer: https://www.fusejs.io/api/methods.html#search</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">keys</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&#34;title&#34;</span><span class="p">,</span><span class="w"> </span><span class="s2">&#34;permalink&#34;</span><span class="p">,</span><span class="w"> </span><span class="s2">&#34;summary&#34;</span><span class="p">,</span><span class="w"> </span><span class="s2">&#34;content&#34;</span><span class="p">]</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><hr>
<h3 id="draft-page-indication">Draft Page indication<a hidden class="anchor" aria-hidden="true" href="#draft-page-indication">#</a></h3>
<p>adds <code>[draft]</code> mark to indicate draft pages.</p>
<hr>
<h3 id="post-cover-image">Post Cover Image<a hidden class="anchor" aria-hidden="true" href="#post-cover-image">#</a></h3>
<p>In post&rsquo;s page-variables add :</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">cover</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">image</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&lt;image path/url&gt;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="c"># can also paste direct link from external site</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="c"># ex. https://i.ibb.co/K0HVPBd/paper-mod-profilemode.png</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">alt</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&lt;alt text&gt;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">caption</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&lt;text&gt;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">relative</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="c"># To use relative path for cover image, used in hugo Page-bundles</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p>When you include images in the <a href="https://gohugo.io/content-management/page-bundles/">Page Bundle</a>, multiple sizes of the image will automatically be provided using the HTML5 <code>srcset</code> field.</p>
<p>To reduce generation time and size of the site, you can disable this feature using</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">cover</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">responsiveImages</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p>To enable hyperlinks to the full image size on post pages, use</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">cover</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">linkFullImages</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><hr>
<h3 id="share-buttons-on-post">Share Buttons on post<a hidden class="anchor" aria-hidden="true" href="#share-buttons-on-post">#</a></h3>
<p>Displays Share Buttons at Bottom of each post</p>
<p>to show share buttons add</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">ShowShareButtons</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span></code></pre></div><hr>
<h3 id="show-post-reading-time">Show post reading time<a hidden class="anchor" aria-hidden="true" href="#show-post-reading-time">#</a></h3>
<p>Displays Reading Time (the estimated time, in minutes, it takes to read the content.)</p>
<p>To show reading time add</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">Params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">ShowReadingTime</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span></code></pre></div><hr>
<h3 id="show-table-of-contents-toc-on-blog-post">Show Table of Contents (Toc) on blog post<a hidden class="anchor" aria-hidden="true" href="#show-table-of-contents-toc-on-blog-post">#</a></h3>
<p>Displays ToC on blog-pages</p>
<p>To show ToC add following to page-variables</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">ShowToc</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span></code></pre></div><p>To keep Toc Open <strong>by default</strong> on a post add following to page-variables:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">TocOpen</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span></code></pre></div><hr>
<h3 id="breadcrumb-navigation">BreadCrumb Navigation<a hidden class="anchor" aria-hidden="true" href="#breadcrumb-navigation">#</a></h3>
<p>Adds BreadCrumb Navigation above Post&rsquo;s Title to show subsections and Navigation to Home</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">ShowBreadCrumbs</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span></code></pre></div><p>Can be diabled for particular page&rsquo;s front-matter</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">ShowBreadCrumbs</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span><span class="w">
</span></span></span></code></pre></div><hr>
<h3 id="edit-link-for-posts">Edit Link for Posts<a hidden class="anchor" aria-hidden="true" href="#edit-link-for-posts">#</a></h3>
<p>Add a button to suggest changes by using the file path of the post to link to a edit destination.</p>
<p>For site config use:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">Params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">editPost</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">URL</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;https://github.com/&lt;path_to_repo&gt;/content&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">Text</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;Suggest Changes&#34;</span><span class="w"> </span><span class="c"># edit text</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">appendFilePath</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span><span class="c"># to append file path to Edit link</span><span class="w">
</span></span></span></code></pre></div><p>Can be modified for individual pages</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">editPost</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">URL</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;https://github.com/&lt;path_to_repo&gt;/content&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">Text</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;Suggest Changes&#34;</span><span class="w"> </span><span class="c"># edit text</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">appendFilePath</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span><span class="c"># to append file path to Edit link</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span><span class="w">
</span></span></span></code></pre></div><p>The example above would yield the following link for the post file <code>posts/post-name.md</code>:
<code>https://github.com/&lt;path_to_repo&gt;/content/posts/post-name.md</code></p>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Required</th>
<th>Default Value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>editPost.URL</code></td>
<td>true</td>
<td>-</td>
</tr>
<tr>
<td><code>editPost.appendFilePath</code></td>
<td>false</td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>editPost.Text</code></td>
<td>false</td>
<td><code>Edit</code></td>
</tr>
</tbody>
</table>
<p>Since the link generated is a regular HTML anchor tag <code>&lt;a href=...&gt;</code>, you can
also use other URL schemas like <code>mailto://</code>, e.g.
<code>URL: &quot;mailto://mail@example.com?subject=Suggesting changes for &quot;</code></p>
<hr>
<h3 id="other-posts-suggestion-below-a-post">Other Posts suggestion below a post<a hidden class="anchor" aria-hidden="true" href="#other-posts-suggestion-below-a-post">#</a></h3>
<p>Adds a Previous / Next post suggestion under a single post</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">ShowPostNavLinks</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span></code></pre></div><hr>
<h3 id="code-copy-button">Code Copy Button<a hidden class="anchor" aria-hidden="true" href="#code-copy-button">#</a></h3>
<p>Adds a <code>copy</code> button in code block to copy the code it contains</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">ShowCodeCopyButtons</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span></code></pre></div><hr>
<h3 id="multiple-authors">Multiple Authors<a hidden class="anchor" aria-hidden="true" href="#multiple-authors">#</a></h3>
<p>To Use multiple authors for a post, in post-variables:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">author</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&#34;Me&#34;</span><span class="p">,</span><span class="w"> </span><span class="s2">&#34;You&#34;</span><span class="p">]</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span><span class="w">
</span></span></span></code></pre></div><p>To use Multiple Authors Site-wide, in <code>config.yml</code>:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">author</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&#34;Me&#34;</span><span class="p">,</span><span class="w"> </span><span class="s2">&#34;You&#34;</span><span class="p">]</span><span class="w">
</span></span></span></code></pre></div><hr>
<h3 id="comments">Comments<a hidden class="anchor" aria-hidden="true" href="#comments">#</a></h3>
<p>to add comments, create a html file</p>
<p><code>layouts/partials/comments.html</code></p>
<p>and paste code provided by your comments provider</p>
<p>also in config add this</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">comments</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span></code></pre></div><p>read more about this <a href="https://gohugo.io/content-management/comments/">hugo-comments</a></p>
<hr>
<h3 id="accesskeys">AccessKeys<a hidden class="anchor" aria-hidden="true" href="#accesskeys">#</a></h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">c - ToC Open/Close
</span></span><span class="line"><span class="cl">g - Go To Top
</span></span><span class="line"><span class="cl">h - Home (according to current lang)
</span></span><span class="line"><span class="cl">t - Theme toggle
</span></span><span class="line"><span class="cl">/ - Jumps to search page if in menu
</span></span></code></pre></div><p><a href="https://www.w3schools.com/tags/att_global_accesskey.asp">What&rsquo;s AccessKeys ?</a></p>
<hr>
<h3 id="enhanced-seo">Enhanced SEO<a hidden class="anchor" aria-hidden="true" href="#enhanced-seo">#</a></h3>
<p><strong>Enabled only when <code>env: production</code></strong></p>
<ul>
<li><a href="https://support.google.com/webmasters/answer/7506797?hl=en">Rich Results/Snippets Support</a></li>
</ul>
<h4 id="twitter-cards-support">Twitter Cards Support<a hidden class="anchor" aria-hidden="true" href="#twitter-cards-support">#</a></h4>
<ul>
<li>The Twitter Cards metadata, except <code>twitter:image</code> should not require
additional configuration, since it is generated from metadata that
you should already have (for instance the page title and description).</li>
<li>The <code>twitter:image</code> uses the <a href="/atomgit-blog/posts/papermod/papermod-features/#post-cover-image">Post Cover Image</a>, if present.</li>
<li>In the absence of a cover images, the first image from the <code>images</code>
frontmatter (a list) is used.
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">images</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span>- <span class="l">image_01.png</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span>- <span class="l">image_02.png</span><span class="w">
</span></span></span></code></pre></div></li>
<li>Finally, if neither of those are provided, <code>twitter:image</code> comes from the first
<a href="https://gohugo.io/content-management/page-bundles/">Page Bundle</a>
image with <code>feature</code> in the name, with a fallback to the first image with
<code>cover</code> or <code>thumbnail</code> in the name.</li>
</ul>
<h4 id="opengraph-support">OpenGraph support<a hidden class="anchor" aria-hidden="true" href="#opengraph-support">#</a></h4>
<ul>
<li>The OpenGraph metadata, except <code>og:image</code> should not require
additional configuration, since it is generated from metadata that
you should already have (for instance the page title and description).</li>
<li>The <code>og:image</code> uses the <a href="/atomgit-blog/posts/papermod/papermod-features/#post-cover-image">Post Cover Image</a>, if present.</li>
<li>In the absence of a cover images, the first image from the <code>images</code>
frontmatter (a list) is used.
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">images</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span>- <span class="l">image_01.png</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span>- <span class="l">image_02.png</span><span class="w">
</span></span></span></code></pre></div></li>
<li>Finally, if neither of those are provided, <code>og:image</code> comes from the first
<a href="https://gohugo.io/content-management/page-bundles/">Page Bundle</a>
image with <code>feature</code> in the name, with a fallback to the first image with
<code>cover</code> or <code>thumbnail</code> in the name.</li>
<li>For pages, you can also add audio (using frontmatter <code>audio: filename.ext</code>) and/or
videos.
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">videos</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span>- <span class="l">filename01.mov</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span>- <span class="l">filename02.avi</span><span class="w">
</span></span></span></code></pre></div></li>
</ul>
<hr>
<h3 id="multilingual-support">Multilingual Support<a hidden class="anchor" aria-hidden="true" href="#multilingual-support">#</a></h3>
<hr>
<h3 id="misc">Misc<a hidden class="anchor" aria-hidden="true" href="#misc">#</a></h3>
<h4 id="scroll-bar-themed-by-default">Scroll-Bar themed (by default)<a hidden class="anchor" aria-hidden="true" href="#scroll-bar-themed-by-default">#</a></h4>
<h4 id="smooth-scroll-between-in-page-links-by-default">Smooth Scroll between in-page links (by default)<a hidden class="anchor" aria-hidden="true" href="#smooth-scroll-between-in-page-links-by-default">#</a></h4>
<h4 id="scroll-to-top-button-by-default">Scroll-to-Top Button (by default)<a hidden class="anchor" aria-hidden="true" href="#scroll-to-top-button-by-default">#</a></h4>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">Displays a Scroll-to-Top button in right-bottom corner
</span></span></code></pre></div><h4 id="google-analytics-integration">Google Analytics integration<a hidden class="anchor" aria-hidden="true" href="#google-analytics-integration">#</a></h4>
<h4 id="syntax-highlighting">Syntax highlighting<a hidden class="anchor" aria-hidden="true" href="#syntax-highlighting">#</a></h4>
<h4 id="rss-feeds">RSS feeds<a hidden class="anchor" aria-hidden="true" href="#rss-feeds">#</a></h4>


  </div>

  <footer class="post-footer">
    <ul class="post-tags">
      <li><a href="https://pagesorg.atomgit.net/atomgit-blog/tags/papermod/">PaperMod</a></li>
      <li><a href="https://pagesorg.atomgit.net/atomgit-blog/tags/docs/">Docs</a></li>
    </ul>
<nav class="paginav">
  <a class="prev" href="https://pagesorg.atomgit.net/atomgit-blog/posts/atomgit/1/">
    <span class="title">« Prev</span>
    <br>
    <span>开放原子开源活动贡献榜开源项目协作教程</span>
  </a>
  <a class="next" href="https://pagesorg.atomgit.net/atomgit-blog/posts/markdown-syntax/">
    <span class="title">Next »</span>
    <br>
    <span>Markdown Syntax Guide</span>
  </a>
</nav>


<ul class="share-buttons">
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share Features / Mods on x"
            href="https://x.com/intent/tweet/?text=Features%20%2f%20Mods&amp;url=https%3a%2f%2fpagesorg.atomgit.net%2fatomgit-blog%2fposts%2fpapermod%2fpapermod-features%2f&amp;hashtags=PaperMod%2cDocs">
            <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
                <path
                    d="M512 62.554 L 512 449.446 C 512 483.97 483.97 512 449.446 512 L 62.554 512 C 28.03 512 0 483.97 0 449.446 L 0 62.554 C 0 28.03 28.029 0 62.554 0 L 449.446 0 C 483.971 0 512 28.03 512 62.554 Z M 269.951 190.75 L 182.567 75.216 L 56 75.216 L 207.216 272.95 L 63.9 436.783 L 125.266 436.783 L 235.9 310.383 L 332.567 436.783 L 456 436.783 L 298.367 228.367 L 432.367 75.216 L 371.033 75.216 Z M 127.633 110 L 164.101 110 L 383.481 400.065 L 349.5 400.065 Z" />
            </svg>
        </a>
    </li>
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share Features / Mods on linkedin"
            href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https%3a%2f%2fpagesorg.atomgit.net%2fatomgit-blog%2fposts%2fpapermod%2fpapermod-features%2f&amp;title=Features%20%2f%20Mods&amp;summary=Features%20%2f%20Mods&amp;source=https%3a%2f%2fpagesorg.atomgit.net%2fatomgit-blog%2fposts%2fpapermod%2fpapermod-features%2f">
            <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
                <path
                    d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-288.985,423.278l0,-225.717l-75.04,0l0,225.717l75.04,0Zm270.539,0l0,-129.439c0,-69.333 -37.018,-101.586 -86.381,-101.586c-39.804,0 -57.634,21.891 -67.617,37.266l0,-31.958l-75.021,0c0.995,21.181 0,225.717 0,225.717l75.02,0l0,-126.056c0,-6.748 0.486,-13.492 2.474,-18.315c5.414,-13.475 17.767,-27.434 38.494,-27.434c27.135,0 38.007,20.707 38.007,51.037l0,120.768l75.024,0Zm-307.552,-334.556c-25.674,0 -42.448,16.879 -42.448,39.002c0,21.658 16.264,39.002 41.455,39.002l0.484,0c26.165,0 42.452,-17.344 42.452,-39.002c-0.485,-22.092 -16.241,-38.954 -41.943,-39.002Z" />
            </svg>
        </a>
    </li>
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share Features / Mods on reddit"
            href="https://reddit.com/submit?url=https%3a%2f%2fpagesorg.atomgit.net%2fatomgit-blog%2fposts%2fpapermod%2fpapermod-features%2f&title=Features%20%2f%20Mods">
            <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
                <path
                    d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-3.446,265.638c0,-22.964 -18.616,-41.58 -41.58,-41.58c-11.211,0 -21.361,4.457 -28.841,11.666c-28.424,-20.508 -67.586,-33.757 -111.204,-35.278l18.941,-89.121l61.884,13.157c0.756,15.734 13.642,28.29 29.56,28.29c16.407,0 29.706,-13.299 29.706,-29.701c0,-16.403 -13.299,-29.702 -29.706,-29.702c-11.666,0 -21.657,6.792 -26.515,16.578l-69.105,-14.69c-1.922,-0.418 -3.939,-0.042 -5.585,1.036c-1.658,1.073 -2.811,2.761 -3.224,4.686l-21.152,99.438c-44.258,1.228 -84.046,14.494 -112.837,35.232c-7.468,-7.164 -17.589,-11.591 -28.757,-11.591c-22.965,0 -41.585,18.616 -41.585,41.58c0,16.896 10.095,31.41 24.568,37.918c-0.639,4.135 -0.99,8.328 -0.99,12.576c0,63.977 74.469,115.836 166.33,115.836c91.861,0 166.334,-51.859 166.334,-115.836c0,-4.218 -0.347,-8.387 -0.977,-12.493c14.564,-6.47 24.735,-21.034 24.735,-38.001Zm-119.474,108.193c-20.27,20.241 -59.115,21.816 -70.534,21.816c-11.428,0 -50.277,-1.575 -70.522,-21.82c-3.007,-3.008 -3.007,-7.882 0,-10.889c3.003,-2.999 7.882,-3.003 10.885,0c12.777,12.781 40.11,17.317 59.637,17.317c19.522,0 46.86,-4.536 59.657,-17.321c3.016,-2.999 7.886,-2.995 10.885,0.008c3.008,3.011 3.003,7.882 -0.008,10.889Zm-5.23,-48.781c-16.373,0 -29.701,-13.324 -29.701,-29.698c0,-16.381 13.328,-29.714 29.701,-29.714c16.378,0 29.706,13.333 29.706,29.714c0,16.374 -13.328,29.698 -29.706,29.698Zm-160.386,-29.702c0,-16.381 13.328,-29.71 29.714,-29.71c16.369,0 29.689,13.329 29.689,29.71c0,16.373 -13.32,29.693 -29.689,29.693c-16.386,0 -29.714,-13.32 -29.714,-29.693Z" />
            </svg>
        </a>
    </li>
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share Features / Mods on facebook"
            href="https://facebook.com/sharer/sharer.php?u=https%3a%2f%2fpagesorg.atomgit.net%2fatomgit-blog%2fposts%2fpapermod%2fpapermod-features%2f">
            <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
                <path
                    d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-106.468,0l0,-192.915l66.6,0l12.672,-82.621l-79.272,0l0,-53.617c0,-22.603 11.073,-44.636 46.58,-44.636l36.042,0l0,-70.34c0,0 -32.71,-5.582 -63.982,-5.582c-65.288,0 -107.96,39.569 -107.96,111.204l0,62.971l-72.573,0l0,82.621l72.573,0l0,192.915l-191.104,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Z" />
            </svg>
        </a>
    </li>
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share Features / Mods on whatsapp"
            href="https://api.whatsapp.com/send?text=Features%20%2f%20Mods%20-%20https%3a%2f%2fpagesorg.atomgit.net%2fatomgit-blog%2fposts%2fpapermod%2fpapermod-features%2f">
            <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
                <path
                    d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-58.673,127.703c-33.842,-33.881 -78.847,-52.548 -126.798,-52.568c-98.799,0 -179.21,80.405 -179.249,179.234c-0.013,31.593 8.241,62.428 23.927,89.612l-25.429,92.884l95.021,-24.925c26.181,14.28 55.659,21.807 85.658,21.816l0.074,0c98.789,0 179.206,-80.413 179.247,-179.243c0.018,-47.895 -18.61,-92.93 -52.451,-126.81Zm-126.797,275.782l-0.06,0c-26.734,-0.01 -52.954,-7.193 -75.828,-20.767l-5.441,-3.229l-56.386,14.792l15.05,-54.977l-3.542,-5.637c-14.913,-23.72 -22.791,-51.136 -22.779,-79.287c0.033,-82.142 66.867,-148.971 149.046,-148.971c39.793,0.014 77.199,15.531 105.329,43.692c28.128,28.16 43.609,65.592 43.594,105.4c-0.034,82.149 -66.866,148.983 -148.983,148.984Zm81.721,-111.581c-4.479,-2.242 -26.499,-13.075 -30.604,-14.571c-4.105,-1.495 -7.091,-2.241 -10.077,2.241c-2.986,4.483 -11.569,14.572 -14.182,17.562c-2.612,2.988 -5.225,3.364 -9.703,1.12c-4.479,-2.241 -18.91,-6.97 -36.017,-22.23c-13.314,-11.876 -22.304,-26.542 -24.916,-31.026c-2.612,-4.484 -0.279,-6.908 1.963,-9.14c2.016,-2.007 4.48,-5.232 6.719,-7.847c2.24,-2.615 2.986,-4.484 4.479,-7.472c1.493,-2.99 0.747,-5.604 -0.374,-7.846c-1.119,-2.241 -10.077,-24.288 -13.809,-33.256c-3.635,-8.733 -7.327,-7.55 -10.077,-7.688c-2.609,-0.13 -5.598,-0.158 -8.583,-0.158c-2.986,0 -7.839,1.121 -11.944,5.604c-4.105,4.484 -15.675,15.32 -15.675,37.364c0,22.046 16.048,43.342 18.287,46.332c2.24,2.99 31.582,48.227 76.511,67.627c10.685,4.615 19.028,7.371 25.533,9.434c10.728,3.41 20.492,2.929 28.209,1.775c8.605,-1.285 26.499,-10.833 30.231,-21.295c3.732,-10.464 3.732,-19.431 2.612,-21.298c-1.119,-1.869 -4.105,-2.99 -8.583,-5.232Z" />
            </svg>
        </a>
    </li>
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share Features / Mods on telegram"
            href="https://telegram.me/share/url?text=Features%20%2f%20Mods&amp;url=https%3a%2f%2fpagesorg.atomgit.net%2fatomgit-blog%2fposts%2fpapermod%2fpapermod-features%2f">
            <svg version="1.1" xml:space="preserve" viewBox="2 2 28 28" height="30px" width="30px" fill="currentColor">
                <path
                    d="M26.49,29.86H5.5a3.37,3.37,0,0,1-2.47-1,3.35,3.35,0,0,1-1-2.47V5.48A3.36,3.36,0,0,1,3,3,3.37,3.37,0,0,1,5.5,2h21A3.38,3.38,0,0,1,29,3a3.36,3.36,0,0,1,1,2.46V26.37a3.35,3.35,0,0,1-1,2.47A3.38,3.38,0,0,1,26.49,29.86Zm-5.38-6.71a.79.79,0,0,0,.85-.66L24.73,9.24a.55.55,0,0,0-.18-.46.62.62,0,0,0-.41-.17q-.08,0-16.53,6.11a.59.59,0,0,0-.41.59.57.57,0,0,0,.43.52l4,1.24,1.61,4.83a.62.62,0,0,0,.63.43.56.56,0,0,0,.4-.17L16.54,20l4.09,3A.9.9,0,0,0,21.11,23.15ZM13.8,20.71l-1.21-4q8.72-5.55,8.78-5.55c.15,0,.23,0,.23.16a.18.18,0,0,1,0,.06s-2.51,2.3-7.52,6.8Z" />
            </svg>
        </a>
    </li>
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share Features / Mods on ycombinator"
            href="https://news.ycombinator.com/submitlink?t=Features%20%2f%20Mods&u=https%3a%2f%2fpagesorg.atomgit.net%2fatomgit-blog%2fposts%2fpapermod%2fpapermod-features%2f">
            <svg version="1.1" xml:space="preserve" width="30px" height="30px" viewBox="0 0 512 512" fill="currentColor"
                xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
                <path
                    d="M449.446 0C483.971 0 512 28.03 512 62.554L512 449.446C512 483.97 483.97 512 449.446 512L62.554 512C28.03 512 0 483.97 0 449.446L0 62.554C0 28.03 28.029 0 62.554 0L449.446 0ZM183.8767 87.9921H121.8427L230.6673 292.4508V424.0079H281.3328V292.4508L390.1575 87.9921H328.1233L256 238.2489z" />
            </svg>
        </a>
    </li>
</ul>

  </footer>
</article>
    </main>
    
<footer class="footer">
        <span>© <a href="https://atomgit.com/kyle">Kyle</a></span> · 

    <span>
        Powered by
        <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
        <a href="https://github.com/adityatelange/hugo-PaperMod/" rel="noopener" target="_blank">PaperMod</a>
    </span>
</footer>
<a href="#top" aria-label="go to top" title="Go to Top (Alt + G)" class="top-link" id="top-link" accesskey="g">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentColor">
        <path d="M12 6H0l6-6z" />
    </svg>
</a>

<script>
    let menu = document.getElementById('menu')
    if (menu) {
        menu.scrollLeft = localStorage.getItem("menu-scroll-position");
        menu.onscroll = function () {
            localStorage.setItem("menu-scroll-position", menu.scrollLeft);
        }
    }

    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener("click", function (e) {
            e.preventDefault();
            var id = this.getAttribute("href").substr(1);
            if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView({
                    behavior: "smooth"
                });
            } else {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView();
            }
            if (id === "top") {
                history.replaceState(null, null, " ");
            } else {
                history.pushState(null, null, `#${id}`);
            }
        });
    });

</script>
<script>
    var mybutton = document.getElementById("top-link");
    window.onscroll = function () {
        if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
            mybutton.style.visibility = "visible";
            mybutton.style.opacity = "1";
        } else {
            mybutton.style.visibility = "hidden";
            mybutton.style.opacity = "0";
        }
    };

</script>
<script>
    document.getElementById("theme-toggle").addEventListener("click", () => {
        if (document.body.className.includes("dark")) {
            document.body.classList.remove('dark');
            localStorage.setItem("pref-theme", 'light');
        } else {
            document.body.classList.add('dark');
            localStorage.setItem("pref-theme", 'dark');
        }
    })

</script>
<script>
    document.querySelectorAll('pre > code').forEach((codeblock) => {
        const container = codeblock.parentNode.parentNode;

        const copybutton = document.createElement('button');
        copybutton.classList.add('copy-code');
        copybutton.innerHTML = 'copy';

        function copyingDone() {
            copybutton.innerHTML = 'copied!';
            setTimeout(() => {
                copybutton.innerHTML = 'copy';
            }, 2000);
        }

        copybutton.addEventListener('click', (cb) => {
            if ('clipboard' in navigator) {
                navigator.clipboard.writeText(codeblock.textContent);
                copyingDone();
                return;
            }

            const range = document.createRange();
            range.selectNodeContents(codeblock);
            const selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
            try {
                document.execCommand('copy');
                copyingDone();
            } catch (e) { };
            selection.removeRange(range);
        });

        if (container.classList.contains("highlight")) {
            container.appendChild(copybutton);
        } else if (container.parentNode.firstChild == container) {
            
        } else if (codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "TABLE") {
            
            codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(copybutton);
        } else {
            
            codeblock.parentNode.appendChild(copybutton);
        }
    });
</script>
</body>

</html>
